<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="arrivalDate" label="收款时间"></el-table-column>
      <el-table-column prop="payBankName" label="付款银行"></el-table-column>
      <el-table-column
        prop="payAccountName"
        label="付款方名称"
        
      ></el-table-column>
      <el-table-column prop="payAccountNo" label="付款方账号"></el-table-column>
      <el-table-column
        prop="amount"
        label="收款金额(元)"
      ></el-table-column>
           <el-table-column
        prop="pipeiAmount"
        label="匹配金额(元)"
      ></el-table-column>
      <el-table-column  label="业务差额(元)">
        <template slot-scope="scope">
              {{ (scope.row.amount-scope.row.pipeiAmount)}}
              </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="业务名称"
        :formatter="businessName"
      ></el-table-column>
      <el-table-column prop="date" label="业务信息"></el-table-column>
      <el-table-column
        prop="pipeiResult"
        label="匹配方式"
        :formatter="matching"
      ></el-table-column>
      <el-table-column
        prop="pipeiResult"
        label="状态"
       :formatter="state"
      ></el-table-column>
      <el-table-column prop="date" label="操作" >
        <template slot-scope="scope">
             <el-button type="text" @click="premium(scope.row) " 
          v-if="scope.row.type == 0"
            >保费确认</el-button
          ><br/>
             <el-button type="text" @click="recovery(scope.row) " 
         v-if="scope.row.type == 0"
            >追偿确认</el-button
          ><br/>
       <!--      <el-button type="text" @click="compensatory(scope.row) " 
         v-if="scope.row.type == ''"
            >代偿确认</el-button
          > -->
         
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
    >
    </el-pagination>
    <CompensatoryDialog :dialogVisible="dialogVisibless" @closeWindow= "closeWindow" :row="row" @handleCurrentChange="handleCurrentChange"/>
    <RecoveryDialog :dialogVisible="dialogVisible" @closeWindow= "closeWindow" :row="row" @handleCurrentChange="handleCurrentChange"/>
    <PremiumDialog :dialogVisibles="dialogVisibles" @closeWindow= "closeWindow" :row="row" @handleCurrentChange="handleCurrentChange"/>
  </div>
  
</template>

<script>
import RecoveryDialog from './RecoveryDialog.vue'
import PremiumDialog from './PremiumDialog.vue'
import CompensatoryDialog from './CompensatoryDialog'
export default {
    props:["tableData","total"],
  data() {
    return {
        currentPage:1,
        dialogVisible:false,
        dialogVisibles:false,
        dialogVisibless:false,
    };
  },
  components:{
      RecoveryDialog,PremiumDialog,CompensatoryDialog
  },
  methods: {
      closeWindow(){
          this.dialogVisible = false
          this.dialogVisibles = false
          this.dialogVisibless = false
      },
    handleCurrentChange(val) {
      this.$emit("currentChange",val)
    },
    compensatory(row) {
        this.dialogVisibless = true
        this.row = row
    },
    premium(row){
      this.row = row
      this.dialogVisibles = true
    },
    recovery(row){
      this.row = row
      this.dialogVisible = true
    },
 
    matching(row) {
       return row.pipeiResult == 0
        ? "未匹配"
        : row.incomeOrExpenditure == 1
        ? "系统自动匹配"
        :"手动匹配"
    },
    businessName(row) {
      return row.type == 1
        ? "保费"
        : row.type == 2
        ? "追偿"
        : row.type == 3
        ? "代偿"
        : row.type == undefined
        ? ""
        : "";
    },
  state(row){
      return row.pipeiResult == 0
        ? "待处理"
        :"已处理"
  }
  },
};
</script>

<style scoped>
.el-pagination{
    text-align: right;
    margin-top: 10px;
}
</style>
